<template>
  <div style="text-align: center">
    <div style="width: 99%;height: margin-left: 1rem; text-align: left">
      <el-button
        type="primary"
        size="mini"
        style="height: 2rem; margin: 1rem;"
        @click="handleEdit(scope.$index, scope.row)"
      >
        发布商品
      </el-button>
      <span style="float: center">
        <table style="width: 100%">
          <tr>
            <td
              style="width: 7rem; 
            "
            >
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </td>
            <td style="padding-right:3.9%">
              <el-input v-model="input" placeholder="请输入内容"></el-input>
            </td>
          </tr>
        </table>
      </span>
    </div>
    <!-- 默认为不编辑的只读显示数据 -->
    <div v-if="!isOperation">
      <el-table
        :data="tableData"
        style="width: 90%"
        :header-cell-style="headClass"
        :cell-style="headCellClass"
        Scoped
        slot
      >
        <el-table-column prop="shopName" label="店铺名称" width="180">
        </el-table-column>
        <el-table-column prop="productName" label="商品名称" width="180">
        </el-table-column>
        <el-table-column prop="price" label="价格" width="180">
        </el-table-column>
        <el-table-column prop="address" label="库存"> </el-table-column>
        <el-table-column prop="address" label="销量"> </el-table-column>
        <el-table-column prop="date" label="创建时间"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              plain
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              plain
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 编辑后，所有数据转换为 -->
    <div v-else>
      <el-table
        :data="tableData"
        style="width: 90%"
        :header-cell-style="headClass"
        :cell-style="headCellClass"
      >
        <el-table-column prop="shopName" label="店铺名称" width="180">
        </el-table-column>
        <el-table-column prop="date" label="商品名称" width="180">
        </el-table-column>
        <el-table-column prop="price" label="价格" width="180">
          <template>
            <el-input
              v-model="cs"
              placeholder="请输入内容"
              @input="change($event)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="库存"> </el-table-column>
        <el-table-column prop="address" label="销量"> </el-table-column>
        <el-table-column prop="date" label="创建时间"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="success"
              size="mini"
              @click="handleEditOk(scope.$index, scope.row)"
              plain
              >确认</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleCansel(scope.$index, scope.row)"
              plain
              >取消</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      input: "",
      cs: "123123",
      isOperation: false,
      options: [
        {
          value: "选项1",
          label: "店铺",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
      ],
      tableData: [
        {
          id: 1,
          shopName: '就爱小店1',
          productName: "黄金小蛋糕",
          price: 13.33,
          address: "上海市普陀区金沙江路 1518 弄",
          date: "2016-05-02",
        },
        {
          id: 2,
          shopName: '就爱小店2',
          productName: "黄金小蛋糕",
          price: 23.33,
          address: "上海市普陀区金沙江路 1517 弄",
          date: "2016-05-04",
        },
        {
          id: 3,
          shopName: '就爱小店3',
          productName: "黄金小蛋糕",
          price: 33.33,
          address: "上海市普陀区金沙江路 1519 弄",
          date: "2016-05-01",
        },
        {
          id: 4,
          shopName: '就爱小店4',
          productName: "黄金小蛋糕",
          price: 43.33,
          address: "上海市普陀区金沙江路 1516 弄",
          date: "2016-05-03",
        },
      ],
    };
  },
  methods: {
    change(e) {
      this.$forceUpdate(e.value);
      return e;
    },
    headCellClass() {
      return "text-align: center; font-size: 12px";
    },
    headClass() {
      return "text-align: center";
    },
    // 编辑
    handleEdit(index, row) {
      this.isOperation = !this.isOperation;
      this.tableData.price
      console.log(index, row);
    },
    // 编辑完成
    handleEditOk(index, row) {
      this.isOperation = !this.isOperation;
      console.log(index, row);
    },

    // 删除
    handleDelete(index, row) {
      console.log(index, row);
    },

    handleCansel(index, row){
      console.log(index, row)
    }
  },
};
</script>

<style scoped>
* {
  margin: auto;
  list-style: none;
}
.el-table-column {
  margin: 0px;
}
</style>
